<template>
  <div class="main-container">
    <!-- 轮播图 -->
    <Carousel
      :pictures="banners.slice(0, 5)"
      type="card"
      height="230px"
      position="outside"
    ></Carousel>
    <!-- 推荐歌单 -->
    <ArtistPlaylist
      title="你的歌单补给站"
      :playlists="playLists"
    ></ArtistPlaylist>
    <!-- 推荐音乐 -->
    <div class="musiclist">
      <h4 class="title">推荐新音乐</h4>
      <div class="content">
        <div class="song-recommend" v-for="song in songLists" :key="song.id">
          <div class="mask" @click="playSong(song)">
            <span class="iconfont">&#xea82;</span>
          </div>
          <el-image
            :src="song.songImage"
            loading="lazy"
            class="left"
          ></el-image>
          <div class="right">
            <p>{{ song.name }}</p>
            <p>{{ song.singer }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 最新MV -->
    <ArtistMv title="最新mv" :mvs="mvLists" class="mv-list"></ArtistMv>
  </div>
</template>

<script setup lang="ts">
import { getBanner, getRecPlaylist, getDefaultSong, getMv } from '@/api'
import { reactive, Ref, inject, nextTick } from 'vue'
import { Banner, Playlist, Song, MV } from '@/model'
import {
  getRequest,
  getMusicInfos,
  getMusicUrls,
  getTheme,
  elMessage
} from '@/utils'
import Carousel from '@components/carousel/index.vue'
import { ArtistPlaylist, ArtistMv } from '@components/datalist'
import useFooterStore from '@/store/footer'
import { storeToRefs } from 'pinia'
import useUserStore from '@/store/user'
import { elMessageType } from '@/model/enum'

// 配置主题
const fontColor = getTheme().get('fontColor')
const fontBlack = getTheme().get('fontBlack')
const boxShadow = getTheme().get('shadow')
const themeColor = getTheme().get('themeColor')
const fontGray = inject('fontGray')

const footer = useFooterStore()
const { songList, current, isPlay, playProcess, playTime, songListId } =
  storeToRefs(footer)
const user = useUserStore()

// 轮播图片
const banners = reactive<Banner[]>([])
// 推荐歌单
const playLists = reactive<Playlist[]>([])
// 推荐歌曲
const songLists = reactive<Song[]>([])
// 推荐mv
const mvLists = reactive<MV[]>([])

// 第一次加载的动画
const first = inject('firstLoading') as Ref<boolean>

// 播放歌曲
const playSong = async (song: Song) => {
  // 判断版权
  if (song.available == '0' || song.available == '8') {
    const index = songListId.value.get(song.id)
    if (index == undefined) {
      user.addRecord(song, user.songRecord, user.loveMusicId)
      if (current.value == 0) {
        if (isPlay) {
          isPlay.value = false
        }
        playProcess.value = 0
        playTime.value = 0
        songList.value.unshift(song)
        await nextTick()
        isPlay.value = true
      } else {
        songList.value.unshift(song)
        current.value = 0
      }
    } else {
      if (current.value != index) {
        current.value = index
      } else {
        isPlay.value = true
      }
    }
  } else if (song.available == '1') {
    elMessage(elMessageType.INFO, '此歌曲为vip专属')
  } else if (song.available == '10') {
    elMessage(elMessageType.INFO, '此歌曲尚未拥有版权，请切换其它歌曲')
  }
}

// 获取数据
getRequest(async () => {
  try {
    const responses: any[] = await Promise.all([
      getBanner(),
      getRecPlaylist(10),
      getDefaultSong(40),
      getMv(10, '内地', '全部', '最新')
    ])
    responses.forEach((response, index) => {
      // 获取banner
      if (index == 0) {
        const { banners: banner } = response
        banner.forEach((item: any) => {
          const { imageUrl, targetId } = item
          banners.push({
            id: targetId,
            pic: imageUrl
          })
        })
        console.log(banners)
      } else if (index == 1) {
        // 获取推荐歌单
        const { playlists } = response
        playlists.forEach((item: any) => {
          if (playLists.length < 10) {
            const {
              name,
              id,
              coverImgUrl,
              playCount,
              description,
              tags,
              creator
            } = item
            // 把数据推进playLists
            playLists.push({
              name,
              id,
              image: coverImgUrl,
              playCount,
              description,
              tag: tags,
              creator: {
                avatarUrl: creator.avatarUrl,
                nickname: creator.nickname
              }
            })
          }
        })
      } else if (index == 2) {
        console.log('推荐新音乐')
        const {
          data: { list }
        } = response
        const ids: string[] = []
        for (let item of list) {
          const { fee } = item.data
          if (songLists.length < 10) {
            if (fee == '0' || fee == '8') {
              getMusicInfos(ids, songLists, item.data)
            }
          } else {
            break
          }
        }
        console.log(ids, songLists)
        getMusicUrls(ids.join(','), songLists)
      } else {
        // 获取推荐MV
        const { data } = response
        data.forEach((item: any) => {
          const { id, name, cover, playCount, artistName } = item
          mvLists.push({
            id: id as string,
            name: name as string,
            image: cover as string,
            playCount: playCount as string,
            artist: artistName as string
          })
        })
      }
    })
  } catch (err: any) {
    elMessage(elMessageType.ERROR, err.message)
  }
  // 关闭动画
  first.value = false
}, first)
</script>

<style lang="less" scoped>
@font-color: v-bind(fontColor);
@font-color-light-black: v-bind(fontBlack);
@shadow: v-bind(boxShadow);
@font-color-gray: v-bind(fontGray);
@theme-color: v-bind(themeColor);
.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding-top: 10px;

  .musiclist {
    width: 80vw;
    margin-bottom: 20px;
    .title {
      width: 80vw;
      font-weight: 520;
      font-size: 20px;
      letter-spacing: 1px;
      color: @font-color;
      margin-bottom: 10px;
    }
    .content {
      display: flex;
      flex-wrap: wrap;

      .song-recommend {
        display: flex;
        margin: 10px 0 0;
        width: 40vw;
        position: relative;

        .mask {
          position: absolute;
          height: 50px;
          width: 50px;
          background-color: rgba(0, 0, 0, 0.5);
          border-radius: 10px;
          z-index: 2;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: 0.5s;
          opacity: 0;
          &:hover {
            opacity: 1;
            transform: translateY(-5px);
          }
          &:hover + .left {
            transform: translateY(-5px);
          }

          span {
            color: rgba(255, 255, 255, 0.4);
            transition: 0.4s;
            &:hover {
              color: @theme-color;
              cursor: pointer;
            }
          }
        }
        .left {
          cursor: pointer;
          width: 50px;
          height: 50px;
          object-fit: cover;
          border-radius: 10px;
          box-shadow: @shadow;
          transition: 0.5s;
        }
        .right {
          p {
            font-size: 12px;
            color: @font-color;
            margin-left: 10px;
            &:first-child {
              margin: 7px 0 2px 10px;
            }
            &:last-child {
              font-size: 10px;
              color: @font-color-gray;
            }
          }
        }
      }
    }
  }
}
</style>
